<template>
  <div class="chart_msg">
    <FormPage ref="searchForm" :source="form" :config="searchConfig">
    </FormPage>
  </div>
</template>

<script>
import FormPage from "@/components/FormPage/index.vue";
import { CONFIG_1, CONFIG_2, CONFIG_3, CONFIG_4 } from "./castingLocal";
import { CASTING_TYPE } from "@/utils/local";
import _ from "lodash";
export default {
  props: ["row"],
  components: {
    FormPage,
  },
  computed: {
    searchConfig() {
      console.log("this.row.data6 :>> ", CASTING_TYPE, this.row.data6);
      switch (this.row.data6) {
        case CASTING_TYPE[0]:
          this.form = {
            name1: "机匣",
            name2: "CJ677790-888",
            name3: "202290",
            name4: "李三",
            name5: "1302043",
            name6: "200",
            name7: "200",
            name07: [],
            name8: "19:50:00",
            name9: "王五",
            name10: "60",
            name11: "70",
            name12: "650",
            name13: "白班",
            name14: "",
          };
          return _.cloneDeep(CONFIG_4);
        case CASTING_TYPE[1]: //后处理
          this.form = {
            name1: "60",
            name2: "550",
            name3: "15",
            name4: "20:40:00",
            name5: "300",
            name6: ["1"],
            name07: [],
            name8: "中班",
            name9: "李三",
            name10: "",
            name11: "2022/6/24",
            name12: "60",
            name13: "机匣",
            name14: "CJ677790-456",
            name15: "真空炉",
            name16: "300",
            name17: "2022/6/24",
            name18: "0.65",
            name19: "CJ677790",
          };
          return _.cloneDeep(CONFIG_1);
        case CASTING_TYPE[2]:
          this.form = {
            name1: "20",
            name2: "4321",
            name3: "31",
            name4: "30/65",
            name9: "350",
            name5: "0.5",
            name07: "350",
            name6: "70",
            name7: "450",
            name8: "40",
            name9: "0.5",
            name10: "0.5",
            name11: "0.6",
            name12: "480",
            name13: "15",
            name14: "5",
            name15: "0.4",
            name16: "15",
            name17: "20:10:00",
            name18: "",
          };
          return _.cloneDeep(CONFIG_2);
        // case CASTING_TYPE[3]:
        //   return _.cloneDeep(CONFIG_1);
        default:
          break;
      }
    },
  },
  data() {
    return {
      form: {
        name1: "",
        name2: "",
        name3: "",
        name4: "",
        name5: "",
        name6: "",
        name07: [],
        name8: "",
        name9: "",
        name10: "",
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.chart_msg {
  /* height: 30%; */
  background-color: #0f3583;
  padding: 5px;
  padding-bottom: 0;
  font-size: 14px;
  /deep/ .el-form {
    .el-form-item {
      margin-bottom: 6px;
      .el-checkbox-group {
        height: 32px;
        white-space: nowrap;
      }
      .el-checkbox {
        margin-right: 6px;

        .el-checkbox__label {
          color: #fff;
        }
      }
      .el-input__inner {
        background-color: #010b47;
        color: #fff;
        border: 1px solid #0da9f2;
      }
      .el-range-input {
        background-color: #010b47;
        color: #fff;
      }
      .el-pagination__total {
        color: #fff;
      }
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
    }
    .el-popper[x-placement^="bottom"] .popper__arrow {
      border-bottom-color: #081f63;
    }
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      background-color: #0da9f2;
    }
    .el-select-dropdown {
      background-color: #081f63;
      /* color: #fff !important; */
      border: 1px solid #0da9f2;
      span {
        color: #fff;
      }
    }
    .el-form-item {
      margin-bottom: 6px;
      .el-input__inner {
        background: rgba(1, 11, 71, 0.74);
        border: 1px solid #0da9f2;
      }
    }
    .el-form-item__label {
      /* padding: 0; */
      color: #fff;
      white-space: nowrap;
    }
  }
  .mb_sm {
    margin-bottom: 13px;
  }
}
</style>